<template>
  <div class="layout">
    <div class="navBar" v-if="isShow">
      <h-menu mode="horizontal" @on-select='jump'>
        <h-submenu name="1">
          <template slot="title">
            页面
          </template>
          <h-menu-item name="lm-chat">会话页面</h-menu-item>
					<h-menu-item name="agent-portrait">代理人画像页面</h-menu-item>
					<h-menu-item name="team-info">团队信息页面</h-menu-item>
					<h-menu-item name="smart-assistant-config">智能助手配置</h-menu-item>
        </h-submenu>
      </h-menu>
    </div>
    <div class="layout-content" :class="{'is-see': !isShow}">
      <!-- <router-view></router-view> -->
			<!-- 缓存页面 -->
      <keep-alive :include="keepAliveTabs">
        <router-view v-if="keepAliveMap[activeMenuItem.uuid]"></router-view>
      </keep-alive>
			<!-- 不缓存页面 -->
			<router-view
				v-if="isloadPage && !keepAliveTabsByApi.includes(activeMenuItem.uuid)">
			</router-view>
			<!-- 加载中动画 -->
			<div v-show="isLoading" class="loading-box">
				<h-spin fix>
					<h-icon name="load-c" size="40" class="demo-spin-icon-load"></h-icon>
					<div>loading</div>
				</h-spin>
			</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { onFrame } from 'hui-core'
export default {
  data() {
    return {
			isLoading: false,
      isShow: !window.LOCAL_CONFIG.IS_SEE && process.env.NODE_ENV === 'development',
			keepAliveTabs: [], // 最终真实需要缓存的页面组件name
			keepAliveTabsByApi: [], // 权限数据返回的需要缓存的页面组件name
      keepAliveMap: {},
			activeMenuItem: {},
      isloadPage: true // 加载不需要缓存的页面
    }
  },
	computed: {
		...mapState(['keepLoading', 'needRefreshMenuList', 'isRefresh']),
		key() {
      return this.$route.fullPath
    },
		/**
     * 获取 store 状态仓库中页签信息
     * root 模块会与基座中的 root 状态模块自动同步
     */
		tabList() {
      const { root } = this.$store.state
      if (root) {
        return root.skeleton.tabList
      }
      return []
    },
	},
	watch: {
    keepLoading(val) {
      this.isLoading = val
    },
    /* 在这里部署对 tabList 的监听是为了之后有机会对 keepAliveTabs 进行修改 */
    tabList: {
      immediate: true,
      handler(val) {
				console.log('tabList', val)
        this.keepAliveTabs = val.filter(item => item.originData && (item.originData.is_keep_alivea === true || item.originData.is_keep_alivea === 'true')).map(item => item.originData.id)
				this.keepAliveTabsByApi = this.keepAliveTabs.slice(0)
        this.keepAliveTabs.forEach(element => {
          // console.log(this.keepAliveMap.hasOwnProperty(element))
          if (this.keepAliveMap.hasOwnProperty(element)) {
            this.keepAliveMap[element] = true
          } else {
            this.$set(this.keepAliveMap, element, true)
          }
        });
        for (let i in this.keepAliveMap) {
          if (!this.keepAliveTabs.includes(i)) {
            this.keepAliveMap[i] = false
          }
        }
        console.log('keepAliveMap', this.keepAliveMap)
			}
    },
		/* 动态监听路由变化 */
    $route: {
      immediate: true,
      handler() {
        // const { path } = this.$router.currentRoute
        const { root } = this.$store.state
				// console.log(path)
				if (root) {
					this.activeMenuItem = root.skeleton.activeMenuItem
				} else {
					this.activeMenuItem = {}
				}
      }
    },
    isRefresh(val) {
      if (val) {
        this.reload()
      }
    }
  },
	mounted() {
    /* 部署对基座事件 frame-tab-refresh 的监听，重新渲染视图组件 */
    const systemUuid = window.LOCAL_CONFIG.systemUuid
    onFrame('frame-tab-refresh', info => {
      if (info.currentTab.originData.app_code === systemUuid) {
        this.setNeedRefreshMenuList([info.currentTab.originData])
        this.setRefreshStatus(true)
      }
    })
  },
  methods: {
		...mapMutations(['setNeedRefreshMenuList', 'setRefreshStatus']),
    jump(name) {
      this.$hCore.navigate('/' + name)
    },
		reload() {
      console.log('reload')
      if (this.needRefreshMenuList.length > 1) {
        for (let i = 0; i < this.needRefreshMenuList.length; i++) {
          const inx = this.keepAliveTabs.indexOf(this.needRefreshMenuList[i].id)
          this.keepAliveTabs.splice(inx, 1)
          this.keepAliveMap[this.needRefreshMenuList[i].id] = false
        }
        this.$nextTick(() => {
          for (let i = 0; i < this.needRefreshMenuList.length; i++) {
            this.keepAliveTabs.push(this.needRefreshMenuList[i].id)
            this.keepAliveMap[this.needRefreshMenuList[i].id] = true
            this.setRefreshStatus(false)
          }
        })
      } else {
        if (this.needRefreshMenuList.length > 0 && (this.needRefreshMenuList[0].is_keep_alivea === true || this.needRefreshMenuList[0].is_keep_alivea === 'true')) {
          const inx = this.keepAliveTabs.indexOf(this.needRefreshMenuList[0].id)
          this.keepAliveTabs.splice(inx, 1)
          this.keepAliveMap[this.needRefreshMenuList[0].id] = false
          this.$nextTick(() => {
            this.keepAliveTabs.splice(inx, 0, this.needRefreshMenuList[0].id)
            this.setRefreshStatus(false)
            this.keepAliveMap[this.needRefreshMenuList[0].id] = true
          })
        } else {
          this.isloadPage = !this.isloadPage
          this.$nextTick(() => {
            this.isloadPage = !this.isloadPage
            this.setRefreshStatus(false)
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.layout{
	height: 100%;
	width: 100%;
	.navBar {
		position: relative;
		z-index: 1000;
		width: 100%;
		height: 50px;
		background: #1d96ff;
		padding-left: 100px;
		.h-menu {
			background: #1d96ff;
			height: 100%;
			line-height: 48px;
			.h-menu-submenu {
				color: #fff;
				font-size: 14px;
				border-bottom: none;
				padding: 0 10px;
			}
		}
	}
	.layout-content {
		width: 100%;
		height: calc(100% - 50px);
		overflow-x: hidden;
		&.is-see{
			height: 100%;
		}
		.loading-box{
			.demo-spin-icon-load {
				animation: ani-demo-spin 1s linear infinite;
				display: inline-block;
			}
			/deep/ .h-spin-fix{
				z-index: 9999;
				background-color: unset;
			}
			@keyframes ani-demo-spin {
				from {
					transform: rotate(0deg);
				}
				50% {
					transform: rotate(180deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		}
	}
}
</style>
